<script setup>
import { reactive, toRefs } from 'vue';

// 不偷懒的写法js部分
// const user = reactive({name: 'tom', age: 17})
// 解构失效的演示
// const {name, age} = reactive({name: 'tom', age: 17})
// 解构的正确写法
const user = reactive({name: 'tom', age: 17})
const {name, age} = toRefs(user)
</script>

<template>
  <!-- 不偷懒的写法布局部分 -->
  <!-- <div>
    用户 {{user.name}} 已经 {{user.age}} 岁
  </div>
  <div>
    <button @click="user.age ++">过生日</button>
  </div> -->
  <!-- 解构写法 -->
  <div>
    用户 {{name}} 已经 {{age}} 岁
  </div>
  <div>
    <button @click="age ++">过生日</button>
  </div>
</template>